<template>
  <div class="page">
    <van-nav-bar
      class="page__header"
      :title="title"
      left-text="返回"
      @click-left="$router.go(-1)"
      left-arrow>
      <i slot="right" v-if="$route.query.is_group" class="fs-18 icon-peoples iconfont" @click="$router.push({
        name: 'room-detail',
        params: {
          roomId: $route.params.partnerId
        }
      })"></i>
    </van-nav-bar>
    <div class="page__body">
      <div class="list" @scroll="onScroll" ref="scroll">
        <div class="loading" v-if="loading">
          <van-loading size="24px"/>
        </div>
        <div
          :ref="'msg_' + item.id"
          class="item"
          v-for="item in nlist"
          :key="item.id"
          :data-from="item.from"
          :data-to="item.to"
          :class="itemCls(item)"
        >
          <img class="item-avatar" :src="item.avatar" />
          <div class="item-name">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div class="btm-fixed">
      <div class="form">
        <van-field class="form-input" v-model="content" placeholder="输入您要发送的内容" />
        <van-button class="form-submit" type="primary" @click="sendMessage">发送</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { debounce } from 'lodash-es'

export default {
  data() {
    return {
      content: 'hello',
      chatList: [],
      loading: false,
      pageIndex: 1,
      pageSize: 20,
      hasMore: true,
      prev: null,
      list: []
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    }),
    title() {
      return window.decodeURIComponent(this.$route.query.nickname)
    },
    nlist() {
      const id = this.$route.params.partnerId
      const list = this.$store.state.ch.msgMap[id] || []
      return list
    }
  },
  mounted() {
    // this.$store.dispatch('ch/getHistory', {
    //   r_user: this.$route.params.partnerId,
    //   pageIndex: this.pageIndex,
    //   pageSize: this.pageSize,
    //   init: true,
    //   is_group: this.$route.query.room_id ? 1 : 0,
    //   room_id: this.$route.query.room_id
    // }).then((list) => {
    //   this.hasMore = list.length >= this.pageSize
    //   this.updateList()
    // })
  },
  methods: {
    updateList() {
      const id = this.$route.params.partnerId
      const list = this.$store.state.ch.msgMap[id] || []
      this.list = JSON.parse(JSON.stringify(list))
    },
    onScroll: debounce(function(event) {
      const top = event.target.scrollTop
      console.log(top)
      if ((this.prev !== null) && top < this.prev && top < 10) {
        if ((!this.loading) && this.hasMore) {
          this.loadMore()
        }
      }
      this.prev = top
    }, 200),
    loadMore() {
      console.log('loadMore')
      this.loading = true
      setTimeout(() => {
        this.pageIndex++
        const ref = this.$refs['msg_' + this.list[0].id][0]
        this.$store.dispatch('ch/getHistory', {
          r_user: this.$route.params.partnerId,
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          init: false
        }).then(list => {
          this.hasMore = !!list.length
        }).finally(() => {
          const _this = this
          _this.loading = false
          setTimeout(() => {
            console.log(ref)
            window.ref = ref
            console.log(ref.offsetTop)
            this.updateList()
            _this.$refs.scroll.scrollTop = ref.offsetTop - 60
          }, 200)
        })
      }, 1000)
    },
    isFromMe(item) {
      return +item.s_user === this.$store.state.user.userInfo.id
    },
    itemCls(msg) {
      return this.isFromMe(msg) ? 'item-mine' : 'item-partner'
    },
    sendMessage() {
      const params = {
        r_user: this.$route.params.partnerId,
        content: this.content
      }
      if (this.$route.query.is_group == 1) {
        params.room_id = this.$route.params.partnerId
      }
      this.$store.dispatch('ch/sendMsg', params)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  height: 100vh;
  flex-direction: column;
  background-color: #e8eef2;
}

.list {
  height: calc(100vh - 46px);
  overflow: auto;
  padding-bottom: 80px;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.item {
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 12px;
  color: #333;
  padding: 0 10px;
  margin-top: 20px;
}

.item-avatar {
  float: left;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  border-radius: 50%;
}

.item-avatar-text {
  font-size: 16px;
  font-weight: bold;
  line-height: 38px;
  text-align: center;
  background: #9e9e9e;
  color: #fff;
}

.item-name {
  padding: 10px;
  line-height: 1.5;
  max-width: 180px;
  border-radius: 4px;
}

.item-partner {
  .item-name {
    color: #fff;
    background-color: #4caf50;
  }
}

.item-mine {
  flex-direction: row-reverse;
  .item-avatar {
    margin-right: 0;
    margin-left: 12px;
  }
  .item-name {
    color: #fff;
    background-color: #19a9ea;
  }
}

.btm-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 12px;
  box-sizing: border-box;
  background-color: #e8eef2;
  .form {
    display: flex;
  }
  .form-input {
    padding: 6px;
    border-radius: 4px;
  }
  .form-submit {
    width: 60px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    margin-left: 10px;
  }
}

.loading {
  padding-top: 20px;
  text-align: center;
}

  .list::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .list::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 3px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ccc;
  }
  .list::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: transparent;
  }
</style>
